<template>
  <!-- 头部 -->
  <div class="topBox">
    <div class="L"><a href="index.html">LOGO</a></div>
    <div class="C">
      <div class="saerchbox">
        <input name="" type="text" placeholder="请输入您要搜索的内容"><img src="/assets/images/ss.png">
      </div>
    </div>
    <div class="R"><img src="/assets/images/tr.png"></div>
  </div>

  <!-- 轮播图 -->
  <van-swipe v-if="top" :autoplay="3000" indicator-color="pink">
    <van-swipe-item v-for="(item,key) in top" :key="key">
      <router-link :to="{path: '/product/info',query: {proid: item.id}}">
        <img :src="item.thumb_text">
      </router-link>      
    </van-swipe-item>
  </van-swipe>

  <!-- 分类 -->
  <div class="lqgwBox" v-if="type">
    <ul>
      <li v-for="(item,key) in type" :key="key">
        <router-link :to="{path: '/product/index', query: {typeid: item.id, name: item.name}}">
          <img :src="item.thumb_text">
          <p>{{item.name}}</p>
        </router-link>
      </li>
    </ul>
  </div>

  <!-- 广告图 -->
  <div class="adBox">
    <img src="/assets/images/banner.jpg">
  </div>
  
  <!-- 推荐商品 -->
  <ul class="proul" v-if="news">
    <li v-for="(item,key) in news" :key="key">
      <div class="con">
        <a href="javascript:void(0)">
          <router-link :to="{path: '/product/info', query:{proid: item.id}}">
            <img :src="item.thumb_text">
          </router-link>
          
          <p><span>￥</span>{{item.price}}</p>
        </a>
      </div>
    </li>
  </ul>

  <!-- 底部 -->
  <tabbar />
  
</template>

<script setup>
  import tabbar from '@/components/tabbar.vue'
  // import product from '../routers/product';

  const {proxy} = getCurrentInstance()

  let top = ref([])
  let news = ref([])
  let type = ref([])

  onBeforeMount(() => {
    request()
  })

  const request = async () =>
  {
    var result = await proxy.$POST({
      url: '/index/index',
    })

    var data = result.data

    top.value = data.hasOwnProperty('top') ? data.top : [];
    news.value = data.hasOwnProperty('news') ? data.news : [];
    type.value = data.hasOwnProperty('type') ? data.type : [];
  }
</script>

<style>

</style>